<%--
  Created by IntelliJ IDEA.
  User: Douliusuo
  Date: 2022/4/30
  Time: 21:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>富文本编辑器</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/public.css" media="all">
        <style>
            *{
                padding: 0;
                margin: 0;
                outline: none;
                box-sizing: border-box;
            }
            .con1{
                width: 100%;
                height: 300px;
                border: 1px solid red;
                font-family: '微软雅黑';
            }
        </style>
    </head>
    <body>
        <div class="layuimini-container">
            <div class="layuimini-main">

                <blockquote class="layui-elem-quote">
                   欢迎使用Object文本编辑器<br>
                    <a href="http://www.dlslearn.com" target="_blank" class="layui-btn layui-btn-danger">ObjectEditor</a>
                </blockquote>

                <div class="div con1" contenteditable="true"></div>


            </div>
        </div>

        <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
        <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
        <script src="${pageContext.request.contextPath}/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
        <script type="text/javascript">
            layui.use(['layer','wangEditor'], function () {
                var $ = layui.jquery,
                    layer = layui.layer,
                    wangEditor = layui.wangEditor;

                var editor = new wangEditor('#editor');
                editor.customConfig.uploadImgServer = "../api/upload.json";
                editor.customConfig.uploadFileName = 'image';
                editor.customConfig.pasteFilterStyle = false;
                editor.customConfig.uploadImgMaxLength = 5;
                editor.customConfig.uploadImgHooks = {
                    // 上传超时
                    timeout: function (xhr, editor) {
                        layer.msg('上传超时！')
                    },
                    // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                    customInsert: function (insertImg, result, editor) {
                        console.log(result);
                        if (result.code == 1) {
                            var url = result.data.url;
                            url.forEach(function (e) {
                                insertImg(e);
                            })
                        } else {
                            layer.msg(result.msg);
                        }
                    }
                };
                editor.customConfig.customAlert = function (info) {
                    layer.msg(info);
                };
                editor.create();

            });
        </script>
    </body>
</html>
